<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>css 制作动态背景</title>
        <style>
            * {
                margin: 0;
                padding: 0;
                box-sizing: border-box;
            }

            body,
            html {
                height: 100vh;
                /* background-color: #000; */
            }

            .container {
                width: 100%;
                height: 100vh;
            }
            .context {
                position: absolute;
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
            }
            .context h1 {
                color: #fff;
                font-size: 3.5rem;
            }

            .area {
                background: #4354c8;
                width: 100%;
                height: 100%;
            }
            .circles {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                overflow: hidden;
            }
            .circles li {
                position: absolute;
                display: block;
                list-style: none;
                width: 20px;
                height: 20px;
                background: #ffffff49;
                animation: float-up 20s linear infinite;
                bottom: -150px;
            }
            .circles li:nth-child(1) {
                left: 25%;
                width: 80px;
                height: 80px;
                animation-duration: 20s;
                animation-delay: 0s;
            }
            .circles li:nth-child(2) {
                left: 15%;
                width: 20px;
                height: 20px;
                animation-duration: 10s;
                animation-delay: 7s;
            }
            .circles li:nth-child(3) {
                left: 50%;
                width: 40px;
                height: 40px;
                animation-duration: 12s;
                animation-delay: 1s;
            }
            .circles li:nth-child(4) {
                left: 80%;
                width: 30px;
                height: 30px;
                animation-duration: 12s;
                animation-delay: 2s;
            }
            .circles li:nth-child(5) {
                left: 86%;
                width: 50px;
                height: 50px;
                animation-delay: 1s;
            }
            .circles li:nth-child(6) {
                left: 34%;
                width: 40px;
                height: 40px;
                animation-delay: 7s;
            }
            .circles li:nth-child(7) {
                left: 44%;
                width: 30px;
                height: 30px;
                animation-delay: 1s;
            }
            .circles li:nth-child(8) {
                left: 4%;
                width: 30px;
                height: 30px;
                animation-delay: 2s;
            }
            .circles li:nth-child(9) {
                left: 65%;
                width: 60px;
                height: 60px;
                animation-delay: 4s;
                animation-duration: 14s;
            }
            .circles li:nth-child(10) {
                left: 94%;
                width: 40px;
                height: 40px;
                animation-delay: 5s;
                animation-duration: 10s;
            }

            @keyframes animate {
                0% {
                    transform: translate(-50%, -50%) scale(1);
                }
                100% {
                    transform: translate(-50%, -50%) scale(2);
                }
            }

            @keyframes float-up {
                0% {
                    transform: translateY(0) rotate(0deg);
                    opacity: 1;
                    border-radius: 0;
                }
                100% {
                    transform: translateY(-1000px) rotate(720deg);
                    opacity: 0;
                    border-radius: 50%;
                }
            }
        </style>
    </head>
    <body>
        <div class="container">
            <!-- 内容以绝对定位的方式显示 -->
            <div class="context">
                <h1>纯 CSS 制作动态背景</h1>
            </div>

            <!-- 动态背景 -->
            <div class="area">
                <ul class="circles">
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                    <li></li>
                </ul>
            </div>
        </div>
    </body>
</html>
